<template>
  <div>
    <div class="banner">
      <banner/>
    </div>
    <div class="content">
      <div class="">
        <div class="div-width" v-for="(item,index) in partners" :key="index">
          <a target="_blank" :href="item.url">
            <el-image
              class="img-cover"
              :src="item.image"
              fit="fill"></el-image>
          </a>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
    import Banner from "../components/Banner";
    export default {
        name: "Partners",
        data(){
            return{
                banners:[
                    { src:require("../assets/banner/partners/合作伙伴.jpg")},
                ],
                partners:[
                    {
                        image:require("../assets/partners/1.jpg"),
                        url:""
                    },{
                        image:require("../assets/partners/2.jpg"),
                        url:""
                    },{
                        image:require("../assets/partners/ABB.jpg"),
                        url:""
                    },{
                        image:require("../assets/partners/Dell.jpg"),
                        url:""
                    },{
                        image:require("../assets/partners/HOUNDA.jpg"),
                        url:""
                    },{
                        image:require("../assets/partners/LINYO力塔.jpg"),
                        url:""
                    },{
                        image:require("../assets/partners/MercedesBenz.jpg"),
                        url:""
                    },{
                        image:require("../assets/partners/NIKE.jpg"),
                        url:""
                    },{
                        image:require("../assets/partners/P&G.jpg"),
                        url:""
                    },{
                        image:require("../assets/partners/Schneider.jpg"),
                        url:""
                    },{
                        image:require("../assets/partners/SEW.jpg"),
                        url:""
                    },{
                        image:require("../assets/partners/TONCIN.jpg"),
                        url:""
                    },{
                        image:require("../assets/partners/上车集团.jpg"),
                        url:""
                    },{
                        image:require("../assets/partners/东阿阿胶.jpg"),
                        url:""
                    },{
                        image:require("../assets/partners/中国南方航空.jpg"),
                        url:""
                    },{
                        image:require("../assets/partners/中国石化.jpg"),
                        url:""
                    },{
                        image:require("../assets/partners/中国石油.jpg"),
                        url:""
                    },{
                        image:require("../assets/partners/中国移动.jpg"),
                        url:""
                    },{
                        image:require("../assets/partners/中国航天.jpg"),
                        url:""
                    },{
                        image:require("../assets/partners/中国邮政.jpg"),
                        url:""
                    },{
                        image:require("../assets/partners/中国鑫达.jpg"),
                        url:""
                    },{
                        image:require("../assets/partners/中国铁路.jpg"),
                        url:""
                    },{
                        image:require("../assets/partners/中故宫中车.jpg"),
                        url:""
                    },{
                        image:require("../assets/partners/九州通.jpg"),
                        url:""
                    },{
                        image:require("../assets/partners/九芝堂.jpg"),
                        url:""
                    },{
                        image:require("../assets/partners/京东.jpg"),
                        url:""
                    },{
                        image:require("../assets/partners/北大荒集团·.jpg"),
                        url:""
                    },{
                        image:require("../assets/partners/唯品会.jpg"),
                        url:""
                    },{
                        image:require("../assets/partners/国家电网公司.jpg"),
                        url:""
                    },{
                        image:require("../assets/partners/建新赵氏集团.jpg"),
                        url:""
                    },{
                        image:require("../assets/partners/新宁物流.jpg"),
                        url:""
                    },{
                        image:require("../assets/partners/泸州老窖.jpg"),
                        url:""
                    },{
                        image:require("../assets/partners/济州药业.jpg"),
                        url:""
                    },{
                        image:require("../assets/partners/百灵鸟.jpg"),
                        url:""
                    },{
                        image:require("../assets/partners/联想.jpg"),
                        url:""
                    },{
                        image:require("../assets/partners/苏宁易购.jpg"),
                        url:""
                    },{
                        image:require("../assets/partners/西门子.jpg"),
                        url:""
                    },{
                        image:require("../assets/partners/贵州茅台集团.jpg"),
                        url:""
                    },{
                        image:require("../assets/partners/阿里巴巴.jpg"),
                        url:""
                    },{
                        image:require("../assets/partners/雀巢.jpg"),
                        url:""
                    },{
                        image:require("../assets/partners/霍尼韦尔.jpg"),
                        url:""
                    },{
                        image:require("../assets/partners/鲁花.jpg"),
                        url:""
                    },
                ]
            }
        },
        methods: {
            setBanners(){
                //设置轮播图
                this.$store.commit("setBanners",this.banners);
            }
        },
        mounted(){
            this.setBanners();
        },
        components:{
            Banner,
        }
    }
</script>

<style scoped>
  @media screen and (max-width: 768px){
    .div-width{
      margin: 10px;
      width: 40%;
      display: inline-block;
    }
  }
  @media screen and (min-width: 768px){
    .div-width{
      margin: 10px;
      width: 20%;
      display: inline-block;
    }
  }
  /deep/ .el-tabs__item{
    font-size: 16px !important;
  }
  .content{
    padding: 0;
    margin-left: auto;
    margin-right: auto;
    width: 90%;
    margin-bottom: 20px;
    margin-top: 10px;
    text-align: center;
  }
  .img-cover{
    border: 1px solid #ccc;
    aspect-ratio: 16/9;
    width: 100%;
  }
  h1{
    color: #409EFF;
    font-size: 30px;
  }
</style>
